<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海量阅读 - 阅读页面</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: "Microsoft YaHei", Georgia, serif;
            background-color: #f5f3e6; /* 纸张色背景 */
            color: #333;
            line-height: 1.8;
        }
        /* 导航栏样式 */
        .navbar {
            background-color: #79bcff;
        }
        .navbar-brand, .nav-link {
            color: rgb(40, 40, 40) !important;
            /* 加粗 */
            font-weight: bold;
        }
        .nav-link:hover {
            color: #3c8dff !important;
        }
        .footer {
            background-color: hsl(216, 100%, 96%);
            color: #424242;
            padding: 3rem 0;
            margin-top: 3rem;
        }
        /* 阅读工具栏 */
        .reading-toolbar {
            background-color: #d8ecff;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 56px; /* 导航栏高度 */
            z-index: 100;
        }
        .toolbar-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .font-size-control {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        /* 阅读区域 */
        .reading-container {
            max-width: 800px;
            margin: 30px auto;
            padding: 0 20px;
        }
        .book-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .chapter-title {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        .chapter-content {
            font-size: 1.1rem;
            text-align: justify;
            margin-bottom: 40px;
        }
        .chapter-content p {
            margin-bottom: 1.5rem;
        }
        /* 翻页控制 */
        .page-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        /* 阅读设置面板 */
        .reading-settings {
            position: fixed;
            top: 100px;
            right: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            padding: 15px;
            width: 250px;
            z-index: 101;
            display: none;
        }
        .settings-title {
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .setting-item {
            margin-bottom: 15px;
        }
        .setting-label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }
        .theme-options {
            display: flex;
            gap: 10px;
            margin-top: 5px;
        }
        .theme-option {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
        }
        .theme-option.active {
            border-color: #0d6efd;
        }
        /* 夜间模式 */
        body.night-mode {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }
        body.night-mode .reading-toolbar,
        body.night-mode .reading-settings {
            background-color: #333;
        }
        body.night-mode .book-header {
            border-bottom-color: #444;
        }
        body.night-mode .page-navigation {
            border-top-color: #444;
        }
        /* 护眼模式 */
        body.eye-mode {
            background-color: #eaf4ea;
            color: #2d5e2d;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <i class="fas fa-book-reader me-2"></i>海量阅读
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="check.html">分类检索</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link login-trigger" href="#">登录注册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="personal.html">个人中心</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 阅读工具栏 -->
<div class="reading-toolbar">
    <div class="container">
        <div class="d-flex justify-content-between">
            <div class="toolbar-group">
                <button class="btn btn-outline-secondary" id="backToListBtn">
                    <i class="fas fa-arrow-left me-1"></i>返回列表
                </button>
                <button class="btn btn-outline-secondary" id="tocBtn">
                    <i class="fas fa-list me-1"></i>目录
                </button>
            </div>

            <div class="toolbar-group">
                <div class="font-size-control">
                    <button class="btn btn-outline-secondary btn-sm" id="decreaseFontBtn">
                        <i class="fas fa-text-height fa-xs"></i> A-
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="increaseFontBtn">
                        A+ <i class="fas fa-text-height fa-xs"></i>
                    </button>
                </div>
                <button class="btn btn-outline-secondary" id="settingsBtn">
                    <i class="fas fa-cog me-1"></i>设置
                </button>
                <button class="btn btn-outline-secondary" id="nightModeBtn">
                    <i class="fas fa-moon me-1"></i>夜间
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 阅读区域 -->
<div class="reading-container">
    <div class="book-header">
        <h2>追风筝的人</h2>
        <h3 class="chapter-title" id="chapter1">第一章：追风筝的人</h3>
    </div>
    <div class="chapter-content">
        <p>我成为今天的我，是在1975年某个阴云密布的寒冷冬日，那年我十二岁。我清楚地记得当时自己趴在一堵坍塌的泥墙上，窥视着那条小巷，旁边是结冰的小溪。许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。</p>

        <p>巷子里有狗的粪便和腐烂苹果的气味。就在那儿，哈桑和阿塞夫在进行着一场我已经遗忘的对话。我只记得阿塞夫的橡胶靴子踩在泥地里的声音，记得他说的话。</p>

        <p>"你很想念你的妈妈，是吗，哈桑？"阿塞夫说，他的声音听起来无害，像是在谈论天气。"她走了，不是吗？他们说她跟一群吉普赛人跑了。我猜她跟他们上床了，也许她现在还在跟他们上床呢。"</p>

        <p>哈桑的回应是一声呜咽，我听到了。像是一只动物被割伤的声音。</p>

        <p>"所以你做什么都愿意让阿米尔少爷高兴，是吗？"阿塞夫说，"甚至......"他没有说完那句话。</p>

        <p>那天下午，阳光被云层遮挡，哈桑问我要不要去爬山。我说我累了。其实我一点也不累。我只是想回到我的房间去。他点点头，笑容从他脸上消失了。我看着他走开，阳光穿过他松开的鞋带。我心里有什么东西不见了。</p>

        <p>我不记得那是何年何月的事情。我只知道记忆与我同在，将美好的往事完美地浓缩起来，如同一笔浓墨重彩，涂抹在我们那已经变得灰白单调的生活画布上。</p>

        <p>我们住在一个坐落在山上的房子里，俯瞰着喀布尔。我父亲的房子是我童年生活的中心，也是我成年后所有遗憾的源头。那是一座高大的、带着弓形窗户的红砖房子，在它的顶层有一个阳台，哈桑和我常常在那里消磨时光。我们会坐在生锈的铁椅子上，看着风筝在冬日湛蓝的天空中翱翔。</p>

        <p>哈桑是一个哈扎拉人，他的父亲阿里是我父亲的仆人。哈桑和我一起长大，喝着同样的奶妈的奶长大。在喀布尔，这被认为是一种神圣的关系，超越了血缘的关系。我们在同一个院子里的同一片草坪上迈出了第一步。在同一个屋顶下，我们说出了第一个字。我说的是"爸爸"，他说的是"阿米尔"。我的名字。</p>
    </div>
    <!-- 翻页控制 -->
    <div class="page-navigation">
        <button class="btn btn-outline-primary disabled">
            <i class="fas fa-arrow-left me-2"></i>上一章
        </button>
        <button class="btn btn-outline-primary" id="nextChapterBtn">
            下一章 <i class="fas fa-arrow-right ms-2"></i>
        </button>
    </div>
</div>
<!-- 阅读设置面板 -->
<div class="reading-settings" id="settingsPanel">
    <div class="settings-title">阅读设置</div>
    <div class="setting-item">
        <label class="setting-label">字体大小</label>
        <input type="range" class="form-range" min="14" max="24" value="18" id="fontSizeSlider">
    </div>
    <div class="setting-item">
        <label class="setting-label">行间距</label>
        <select class="form-select" id="lineHeightSelect">
            <option value="1.5">1.5倍</option>
            <option value="1.8" selected>1.8倍</option>
            <option value="2">2倍</option>
            <option value="2.5">2.5倍</option>
        </select>
    </div>
    <div class="setting-item">
        <label class="setting-label">阅读主题</label>
        <div class="theme-options">
            <div class="theme-option active" style="background-color: #f5f3e6;" data-theme="default"></div>
            <div class="theme-option" style="background-color: #eaf4ea;" data-theme="eye"></div>
            <div class="theme-option" style="background-color: #1a1a1a;" data-theme="night"></div>
        </div>
    </div>
    <div class="setting-item">
        <label class="setting-label">字体选择</label>
        <select class="form-select" id="fontSelect">
            <option value="'Microsoft YaHei', sans-serif" selected>微软雅黑</option>
            <option value="Georgia, serif">Georgia</option>
            <option value="'SimSun', serif">宋体</option>
            <option value="'KaiTi', serif">楷体</option>
        </select>
    </div>
</div>
<!-- 页脚 -->
<footer class="footer mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4">
                <h5 class="text-black mb-4">海量阅读</h5>
                <p>提供海量免费图书资源，让阅读无处不在</p>
            </div>
            <div class="col-md-2 mb-4">
                <h5 class="text-black mb-4">关于我们</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">关于海量</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">加入我们</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">联系方式</a></li>
                </ul>
            </div>
            <div class="col-md-2 mb-4">
                <h5 class="text-black mb-4">帮助中心</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">使用帮助</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">常见问题</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">意见反馈</a></li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5 class="text-black mb-4">订阅更新</h5>
                <p class="text-muted">订阅我们的 newsletter，获取最新图书资讯</p>
                <div class="input-group">
                    <input type="email" class="form-control" placeholder="您的邮箱">
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>
        </div>
        <hr class="my-4 bg-secondary">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start">
                <p class="text-muted mb-0">© 2025 海量阅读. 保留所有权利</p>
            </div>
            <div class="col-md-6 text-center text-md-end">
                <div class="d-flex justify-content-md-end justify-content-center gap-3">
                    <a href="#" class="text-muted"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="text-muted"><i class="bi bi-twitter"></i></a>
                    <a href="#" class="text-muted"><i class="bi bi-instagram"></i></a>
                    <a href="#" class="text-muted"><i class="bi bi-wechat"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 引入Bootstrap JS和Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const chapterContent = document.querySelector('.chapter-content');
        const fontSizeSlider = document.getElementById('fontSizeSlider');
        const lineHeightSelect = document.getElementById('lineHeightSelect');
        const fontSelect = document.getElementById('fontSelect');
        const themeOptions = document.querySelectorAll('.theme-option');
        const settingsBtn = document.getElementById('settingsBtn');
        const settingsPanel = document.getElementById('settingsPanel');
        const nightModeBtn = document.getElementById('nightModeBtn');
        const increaseFontBtn = document.getElementById('increaseFontBtn');
        const decreaseFontBtn = document.getElementById('decreaseFontBtn');
        const backToListBtn = document.getElementById('backToListBtn');
        const tocBtn = document.getElementById('tocBtn');
        const nextChapterBtn = document.getElementById('nextChapterBtn');
        // 初始化字体大小
        updateFontSize(fontSizeSlider.value);
        // 字体大小调整
        fontSizeSlider.addEventListener('input', function() {
            updateFontSize(this.value);
        });
        increaseFontBtn.addEventListener('click', function() {
            if (fontSizeSlider.value < fontSizeSlider.max) {
                fontSizeSlider.value = parseInt(fontSizeSlider.value) + 1;
                updateFontSize(fontSizeSlider.value);
            }
        });
        decreaseFontBtn.addEventListener('click', function() {
            if (fontSizeSlider.value > fontSizeSlider.min) {
                fontSizeSlider.value = parseInt(fontSizeSlider.value) - 1;
                updateFontSize(fontSizeSlider.value);
            }
        });
        // 行间距调整
        lineHeightSelect.addEventListener('change', function() {
            chapterContent.style.lineHeight = this.value;
        });
        // 字体选择
        fontSelect.addEventListener('change', function() {
            chapterContent.style.fontFamily = this.value;
        });

        // 主题切换
        themeOptions.forEach(option => {
            option.addEventListener('click', function() {
                // 移除所有主题
                document.body.classList.remove('default-mode', 'eye-mode', 'night-mode', 'yellow-mode');

                // 移除所有active类
                themeOptions.forEach(opt => opt.classList.remove('active'));

                // 添加当前主题和active类
                const theme = this.getAttribute('data-theme');
                document.body.classList.add(`${theme}-mode`);
                this.classList.add('active');
            });
        });
        // 夜间模式快捷切换
        nightModeBtn.addEventListener('click', function() {
            document.body.classList.toggle('night-mode');

            // 更新主题选择器状态
            themeOptions.forEach(option => {
                if (option.getAttribute('data-theme') === 'night') {
                    option.classList.toggle('active', document.body.classList.contains('night-mode'));
                } else {
                    option.classList.remove('active');
                }
            });
        });

        // 设置面板显示/隐藏
        settingsBtn.addEventListener('click', function() {
            settingsPanel.style.display = settingsPanel.style.display === 'block' ? 'none' : 'block';
        });

        // 点击页面其他地方关闭设置面板
        document.addEventListener('click', function(event) {
            if (!settingsPanel.contains(event.target) && event.target !== settingsBtn) {
                settingsPanel.style.display = 'none';
            }
        });

        // 返回列表按钮
        backToListBtn.addEventListener('click', function() {
            window.location.href = 'Introduce.html';
        });

        // 目录按钮
        tocBtn.addEventListener('click', function() {
            if (confirm('是否前往目录页？')) {
                window.location.href = 'Introduce.html#chapter1';
            }
        });
        // 下一章按钮
        nextChapterBtn.addEventListener('click', function() {
            alert('已加载下一章内容');
            document.getElementById('chapter1').textContent = '第二章：哈桑的风筝';
            // 实际项目中这里会加载新的章节内容
        });

        // 更新字体大小的函数
        function updateFontSize(size) {
            chapterContent.style.fontSize = `${size}px`;
        }
    });
</script>
</body>
</html>
